<template>
  <div class="sysSwiper">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>轮播图管理</span>
        <el-button @click="addSwiperBtn" style="float:right; margin:-8px;" type="success">添加轮播图</el-button>
        <el-dialog
        title="提示"
        :visible.sync="addSwiperdialog"
        width="30%"
        :before-close="addSwiperdialogClose">
        <!-- 轮播图上传 -->
        <el-upload
        class="upload-demo"
        ref="upload"
        action="http://localhost:3000/api/upload/swiperupload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="uploadFinish"
        :limit="1"
        :file-list="fileList"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传一个jpg/png文件，且不超过500kb</div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancelAddSwiper()">取 消</el-button>
            <el-button type="primary" @click="sureAddSwiper()">确 定</el-button>
        </span>
        </el-dialog>
      </div>
      <div class="swiperForm">
        <el-table :data="swiperData" style="width: 100%">
          <el-table-column label="日期" width="220">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="ID" width="220">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="图片展示" width="220">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>图片名称: {{ scope.row.img_name }}</p>
                <p>图片地址: {{ scope.row.img_url }}</p>
                <div slot="reference" class="name-wrapper">
                  <img class="swiperImg" :src="scope.row.img_url" alt />
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="上传人" width="220">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.author }}</span>
            </template>
          </el-table-column>
          <el-table-column width="220" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" > <a :href="scope.row.img_url" class="displayImg" target="_blank">查看大图</a> </el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="pageSizeArr"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getSwipersApi, delSwipersApi, sureAddSwiper } from "@/api/swiper";
import userInfo from '../../../../store/user/userInfo';
export default {
  data() {
    return {
      swiperDialog:false,
      swiperData: [
        {
          create_time: "2016-05-02",
          img_name: "",
          img_url: "",
          id: 0,
          author: "王小虎"
        }
      ],
      total: 0,
      currentPage1: 1,
      pageSizeArr:[5,10,20,30,40],
      pageSize:5,
      addSwiperdialog:false,
      imageUrl:'',
      fileName:'',
      delFileName:'',
      fileList:[]
    };
  },
  methods: {
    // 获取轮播图
    async getSwiper(data) {
      if (data) {
        await getSwipersApi(data).then(res => {
          if (res.data.code == 1000) {
            this.swiperData = res.data.swipers;
            this.total = res.data.total;
          }
        });
      } else {
        const data = { pageSize: "", pageNum: "" };
        await getSwipersApi(data).then(res => {
          if (res.data.code == 1000) {
            this.swiperData = res.data.swipers;
            this.total = res.data.total;
          }
        });
      }
    },
    // 查看大图
    handleEdit(index, row) {

    },
    // 删除轮播图
    async handleDelete(index, row) {
        this.$confirm(`此操作将永久删除该文件--${row.img_name}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
            const data = {filename:row.img_name,swiperId:row.id}
            await delSwipersApi(data).then( async res=>{
            const data = {pageSize:this.pageSize,pageNum:this.currentPage1}
            await this.getSwiper(data)
        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        
    },
    // 页数量
    async handleSizeChange(val) {
        this.pageSize = val
        const data = {pageSize:this.pageSize,pageNum:this.currentPage1}
        await this.getSwiper(data);
      },
    // 页码
    async handleCurrentChange(val) {
        this.currentPage1 =val
        const data = {pageSize:this.pageSize,pageNum:this.currentPage1}
        await this.getSwiper(data);
      },
    // 添加轮播图
    addSwiperBtn(){
        this.addSwiperdialog = true
    },
    // 对话框关闭
    addSwiperdialogClose(done) {
        this.$confirm('确认关闭？')
          .then(async _  => {
            
            if(this.delFileName){
                const data = {filename:this.delFileName}
                await delSwipersApi(data).then(async res=>{
                    this.delFileName = ''
                    this.fileList = []
                }).catch(err=>{

                })
            }else{
            this.addSwiperdialog = false
            this.$message({
                type:'success',
                message:'取消添加成功'
            })
            }
            
            done();
          })
          .catch(_ => {});
      },
    //   取消添加轮播图
      async cancelAddSwiper(){
        this.addSwiperdialog = false
        this.$message({
            type:'success',
            message:'取消添加成功'
        })
        if(this.delFileName){
                const data = {filename:this.delFileName}
                await delSwipersApi(data).then(async res=>{
                    this.delFileName = ''
                    this.fileList = []
                    this.addSwiperdialog = false
                }).catch(err=>{

                })
            }
      },
    //   上传完成
    uploadFinish(res,file){
        console.log(res);
        this.imageUrl = res.fileUrl
        this.delFileName = res.filename
        this.fileName = res.filename
        this.$message({
            type:'success',
            message:'上传成功'
        })
      },
    //   确认上传
     async sureAddSwiper(){
        if(this.delFileName){
            const userInfo = JSON.parse(localStorage.getItem('userInfo'))
        const data = {img_url:this.imageUrl,img_name:this.fileName,author:userInfo.username}
        await sureAddSwiper(data).then(async res=>{
            this.delFileName = ''
            this.fileList = []
            this.addSwiperdialog = false
            await this.getSwiper();
        })
        }else{
            this.$message({
                type:'error',
                message:'请先上传图片'
            })
        }
       
      },
    submitUpload() {
        this.$refs.upload.submit();
      },
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
    handlePreview(file) {
        console.log(file);
      }
  },

  async mounted() {
    await this.getSwiper();
  }
};
</script>
<style lang="less" scoped>
.sysSwiper {
  height: 80vh;
  .swiperForm {
    height: 70vh;
    overflow: auto;
  }
  .swiperImg {
    width: 120px;
    height: 80px;
  }
  .displayImg{
    text-decoration: none;
    color:#909399 ;
  }
}
</style>